import Input from "@ui/RJMart/input";
import Icon from "@ui/RJMart/icons";
import EventApi from '@module/EventApi'
import usePartState from "@module/usePartState";


export default function InputItem(props) {
    const {title, placeholder ,index,handleChange,name,noStar,tips,unit,showEmityTips,emityTip, defaultPrice}=props
    let formData=props.formData
    const [stateObj, updateState] = usePartState({
        showDefaultPrice:defaultPrice? true:false
    });
    const {showDefaultPrice}=stateObj;

    function addName() {
        let inputEle=document.querySelector(`.bid-inputbid-inputs-input>div[name=${name}] input`);
        if(inputEle){
            inputEle.setAttribute('name',name);
        }
    }
    

    React.useEffect(() => {
        addName();
        updateState({
            showDefaultPrice:defaultPrice? true:false
        })
    }, [defaultPrice]);

    const isValid=formData.$$status.hasOwnProperty(name)&&formData.$$status[name]? false:true



    function handOnkeyDown(e){
        if(e.keyCode ==8 &&defaultPrice){
            const ele=document.querySelector(".bid-inputbid-inputs-input input[name=price]");
            const placeholderNum=parseInt(placeholder);
            if(ele&&!ele.value&&typeof placeholderNum=='number'){
                formData.price='';
                updateState({
                    showDefaultPrice:false
                })
            }
        }
    }

    return(
        <div>
            <div className={'bid-inputbid-content-inputs'}>
                <div className={props.className}>
                    {
                        !noStar&&<span className={'zen_red'}>*</span>
                    }
                    <span className={'bid-inputbid-label'}>{title}</span>
                    <span className={'bid-inputbid-dots'}>:</span>
                </div>
                <div className={'bid-inputbid-inputs-input'} id={showDefaultPrice? 'bid-inputbid-inputs-input-price':''}>
                    {
                        name=='price'?
                            <Input
                                name={name}
                                placeholder={placeholder}
                                value={defaultPrice?defaultPrice:''}
                                onChange={handleChange}
                                // onKeyDown={handOnkeyDown}
                                error={!isValid&&showEmityTips}
                                statusIcon={isValid&&!showEmityTips? null:<Icon type="exclamation-circle-fill" color="error" width="18.26px" height="18.26px"/>}
                            />
                            :
                            <Input
                                name={name}
                                placeholder={placeholder}
                                onChange={handleChange}
                                onKeyDown={handOnkeyDown}
                                error={!isValid&&showEmityTips}
                                statusIcon={isValid&&!showEmityTips? null:<Icon type="exclamation-circle-fill" color="error" width="18.26px" height="18.26px"/>}
                            />
                    }


                    <div className={'bid-inputbid-inputs-right'}>
                        <span className={'bid-inputbid-inputs-r-unit'}>{unit}</span>
                        <span className={'bid-inputbid-inputs-r-tips'}>{
                            formData.defaultprice&&name=='price'?
                                <React.Fragment>
                                    <span>建议您的总报价≤&nbsp;&nbsp;商品总价:&nbsp;&nbsp;</span>
                                    <span className='zen_0093EB'>{formData.defaultprice}</span>
                                    <span>&nbsp;元</span>
                                </React.Fragment>:
                                tips
                        }</span>
                    </div>
                </div>
            </div>
            {
                !isValid&& <p className={'bid-inputbid-error-tip'}>{formData.$$status[name]}</p>
            }
            {
                showEmityTips&& <p className={'bid-inputbid-error-tip'}>{emityTip}</p>
            }
        </div>

    )
}



function MyInput(props) {
    return(
        <div name="price" className="h-input-root h-input-root-normal" id="">
            <div className="h-input-container">
                <input
                   id=""
                   type="text"
                   className="h-input-input"
                   placeholder="请输入"
                   value={props.value}
                   name="price"
                   onChange={props.onChange}
                />
            </div>
        </div>
    )
}